<template>
  <div class="mine">
    <myhead title="个人中心"> </myhead>
    <div class="mine-top">
      <Avatar></Avatar>
      <div class="nick-name">
        <span v-if="!userinfo" @click="gotowhere('login')"> 立即登录 </span>
        <span v-else> {{ userinfo.username }} / {{ userinfo.phone }} </span>
      </div>
    </div>

    <ul class="mine-center">
      <li>
        <img src="../../../src/assets/images/down1.png" alt="" />
        <span>电影订单</span>
      </li>
      <li>
        <img src="../../../src/assets/images/down2.png" alt="" />
        <span>商品订单</span>
      </li>
    </ul>

    <van-row class="mine-bottom">
      <van-cell-group>
        <van-cell
          v-if="userinfo"
          title="历史记录"
          value="内容"
          icon="search"
          is-link
        />
        <van-cell title="优惠券" value="3" icon="goods-collect-o" is-link />
        <van-cell title="组合红包" value="¥ 20" icon="shop-o" is-link />
        <van-cell
          v-if="userinfo"
          title="余额 "
          value="0"
          icon="balance-o"
          is-link
        />
        <van-cell
          v-if="userinfo"
          title="点赞"
          value="4"
          icon="star-o"
          is-link
        />
        <van-cell
          v-if="userinfo"
          title="收藏"
          value="10"
          icon="like-o"
          is-link
        />
        <van-cell title="清除缓存" @click="clearAll" value="" icon="fire-o" />
        <van-cell title="设置" value="" icon="setting-o" is-link />
      </van-cell-group>
    </van-row>
    <div style="margin: 16px" v-if="userinfo">
      <van-button v-shuibowen @click="logout" block type="info" class="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: localStorage.phone ? true : false,
    };
  },
  methods: {
    clearAll() {
      this.$toast.success("清除成功");
    },
    logout() {
      localStorage.removeItem("phone");
      this.changeUserinfo(null);
      // this.$router.push({name:'login'})
    },
  },
  mounted() {
    if (this.isLogin) {
      this.$ajax
        .checkPhone({
          phone: localStorage.phone,
        })
        .then((res) => {
          this.changeUserinfo(res.data[0]); // 用户信息存储在 vuex
        });
    }
  },
};
</script>



<style lang="scss" scoped>
.mine {
  background: #fff;
}
.mine-bottom {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
}
.mine-top {
  text-align: center;
  margin-top: -44px;
  height: 200px;
  padding-left: 22px;
  padding-top: 64px;
  background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
}
.avator-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 20px;
  border: 2px solid #fff;
}
.nick-name {
  font-size: 16px;
}

.center-view .my-order-tab {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  font-size: 13px;
  padding: 0;
  height: 79px;
  background: #fff;
  margin-bottom: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mine-center {
  width: 100%;
  display: flex;
  background: #fff;
  li {
    flex: 1;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 26px;
      height: 26px;
    }
    span {
      margin-top: 8px;
      color: #666;
      font-size: 14px;
    }
  }
}
</style>
